<template>
	<div>
		<!-- 头部 -->
		<div class="heard-body">
			<div class="heard-left">
				<el-button type="success" size="small" plain @click="openAddMotion()">新增</el-button>
				<!-- <el-button type="danger" size="small" plain>批量删除</el-button> -->
				<el-button type="warning" size="small" plain disabled>导出</el-button>
			</div>

			<div class="heard-right">
				<el-input
					style="margin-right: 10px"
					placeholder="请输入搜索内容"
					v-model="searchKey.keyWords"
					@change="searchMotionInfo()"
					size="small"
					clearable
				></el-input>
				<el-button type="primary" size="small" plain icon="el-icon-search"></el-button>
			</div>
		</div>
		<!-- 主体区域 -->
		<el-card shadow="hover" v-show="flag">
			<el-table :data="tableData" stripe style="width: 100%" class="motion-table1">
				<el-table-column prop="debateTopicTitle" :label="$t('message.table.title1')" width="400"> </el-table-column>
				<el-table-column prop="debateTopicClassification" :label="$t('message.table.title9')"> </el-table-column>
				<el-table-column prop="name" :label="$t('message.table.title3')"> </el-table-column>
				<el-table-column prop="debateTopicAddtime" :label="$t('message.table.title4')"> </el-table-column>
				<el-table-column fixed="right" :label="$t('message.table.title5')" width="180">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">{{ $t('message.table.title6') }}</el-button>
						<el-button style="color: orange" type="text" size="small" disabled>{{ $t('message.table.title7') }}</el-button>
						<el-button style="color: red" type="text" size="small" disabled>{{ $t('message.table.title8') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageInfo.pagenum"
					:page-sizes="[8, 12, 16, 20]"
					:page-size="pageInfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</el-card>

		<!-- 新增辩题 -->
		<el-dialog style="hegiht: 200px" title="新增辩题" :visible.sync="addDialogVisible" width="40%" :before-close="handleClose">
			<el-form :model="addMotionFrom" status-icon label-width="100px" class="demo-ruleForm">
				<el-form-item label="辩题类型">
					<el-select v-model="addMotionFrom.debateTopicClassification" placeholder="请选择辩题类型">
						<el-option v-for="item in MotionTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="辩题" prop="title">
					<el-input v-model="addMotionFrom.debateTopicTitle" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="题解">
					<el-input type="textarea" v-model="addMotionFrom.debateTopicDescription" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addMotionInfo()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 查看题解 -->
		<el-dialog
			style="hegiht: 200px"
			:title="detailsInfo.debateTopicTitle"
			:visible.sync="detailsDialogVisible"
			width="40%"
			:before-close="handleClose"
		>
			<div>{{ detailsInfo.debateTopicDescription }}</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detailsDialogVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { getAllMotion, searchMotion, addMotion } from '@/api/motionModular/index.js';
import { Message } from 'element-ui';
export default {
	name: 'debateBank',
	data() {
		return {
			flag: true,
			pageInfo: {
				// 当前页码
				pagenum: 1,
				// 每页显示条数
				pagesize: 8,
			},
			total: 0,
			tableData: [],
			searchKey: {
				keyWords: '',
				pagenum: '',
				pagesize: '',
			},
			addMotionFrom: {
				debateTopicClassification: '',
				debateTopicDescription: '',
				debateTopicTitle: '',
				debateTopicUploaderId: Session.get('userInfo').otherInfo.id,
			},
			MotionTypeOptions: [
				{
					value: '价值辩',
					label: '价值辩',
				},
				{
					value: '事实辩',
					label: '事实辩',
				},
				{
					value: '哲学辩',
					label: '哲学辩',
				},
				{
					value: '政策辩',
					label: '政策辩',
				},
			],
			addDialogVisible: false,
			detailsDialogVisible: false,
			detailsInfo: {},
		};
	},
	created() {
		this.getAllMotionInfo();
	},

	methods: {
		async getAllMotionInfo() {
			let res = await getAllMotion(this.pageInfo);
			if (res.statusCode === 20000) {
				this.tableData = res.data.records;
				this.total = res.data.total;
			}
		},
		// 模糊查询
		async searchMotionInfo() {
			this.searchKey.pagenum = this.pageInfo.pagenum;
			this.searchKey.pagesize = this.pageInfo.pagesize;
			this.flag = false;
			let res = await searchMotion(this.searchKey);
			if (res.statusCode === 20000) {
				// this.$message.succes(res.message);
				this.tableData = res.data.records;
				this.total = res.data.total;
			}
			setTimeout(this.isTrue, 200);
		},
		openAddMotion() {
			this.addDialogVisible = true;
		},
		// 新增辩题
		async addMotionInfo() {
			let res = await addMotion(this.addMotionFrom);
			if (res.statusCode === 20000) {
				this.addDialogVisible = false;
				this.getAllMotionInfo();
				Message.success(res.message);
			}
		},
		handleSizeChange(val) {
			this.flag = false;
			this.pageInfo.pagesize = val;
			this.getAllMotionInfo();
			setTimeout(this.isTrue, 200);
		},
		handleCurrentChange(val) {
			this.flag = false;
			this.pageInfo.pagenum = val;
			this.getAllMotionInfo();
			setTimeout(this.isTrue, 200);
		},
		handleClick(row) {
			this.detailsInfo = row;
			this.detailsDialogVisible = true;
		},
		isTrue() {
			this.flag = true;
		},
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
	},
};
</script>

<style scoped lang="scss">
.heard-body {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}
.heard-right {
	display: flex;
	margin-left: 15px;
	align-items: center;
}
.page {
	margin-top: 10px;
}
.motion-table1 {
	opacity: 0;
	animation-name: error-num;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: calc(1 / 10) + s;
}
</style>
